<template>
  <div class="main">
    <div class="InfoLabelList">
      <header-back @btnclick="serch">
        <b class="my-center" slot="my-center">指定专家</b>
        <span class="my-right" slot="my-right" ></span>
      </header-back>
      <div v-if="!noData">
        <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据">
          <div>
            <div style="height:1rem"></div>
            <div class="expert-list-box">
              <div
                class="expert"
                v-for="item in commodityList"
                :key="item.id"
                @click="chooseExpert(item.name,item.id)"
              >
                <h2>{{item.name}}</h2>
                <b>{{item.agencyName}}{{item.title}}</b>
              </div>
            </div>
          </div>
        </scroller>
      </div>
      <div v-else>
        <div class="noDataImage">
          <img src="~/static/nothing/empty_meiyoushuju.png" alt="">
          <div class="describe">抱歉，这个页面暂无数据~</div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="show9" position="right">
        <div class="serch-box">
          <div class="search-top">
            <img
              @click="closePopup"
              class="closeImg"
              src="~@/static/images/com_icon_back_close_44.png"
              alt
            />
            <div class="searchLine flex-h">
              <span class="imgIcon icon_search"></span>
              <!-- <div class="flex1 left"> -->
              <input
                @keypress="searchBtn"
                class="flex1 left"
                v-model="value"
                type="search"
                placeholder="请输入搜索的专家姓名"
              />
              <!-- </div> -->
              <div class="clears" @click="clears">
                <span class="imgIcon" v-show="value.length > 0"></span>
              </div>
            </div>
          </div>
          <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据">
            <div>
              <div style="height:1rem;margin-top:1rem"></div>
              <div class="expert-list-box">
                <div
                  class="expert"
                  v-for="ite in seachExpertList"
                  :key="ite.id"
                  @click="chooseExpert(ite.name,ite.id)"
                >
                  <h2>{{ite.name}}</h2>
                  <b>{{ite.agencyName}}{{ite.title}}</b>
                </div>
              </div>
            </div>
          </scroller>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { pageInfo, getAssignProfessor } from "~/api/identity";
import headerBack from "~/components/headerBack";
import { TransferDom, Popup, Search } from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    headerBack,
    Popup,
    Search
  },
  data() {
    return {
      value: "",
      results: [],
      show9: false,
      currentPage: 1,
      commodityList: [],
      seachExpertList:[],
      noData: true
    };
  },
  mounted: function() {
    this.$visit("ChoiseExpert")
    this.pageInfo(); 
  },
  methods: {
    closePopup(){
      this.show9=false
      this.value =""
      this.seachExpertList=[]
      this.$visit("ChoiseExpert")

    }, 
    getAssignProfessor() {
      if(!this.value){
        this.$vux.toast.text("请输入搜索名字");
        return false;
      }
      let obj = {
        name: this.value,
        pageNo: 1,
        pageSize: 100
      };
      getAssignProfessor(obj)
        .then(res => {
          if(res.code=='0'){
            this.seachExpertList = res.data.list
            if(this.seachExpertList.length==0){
                this.$vux.toast.text("无对应专家,请重新搜索"); 
            }
          }
          
        })
        .catch(err => {});
    },
    searchBtn(event) {
      if (event.keyCode == 13) {
        //如果按的是enter键 13是enter
        event.preventDefault(); //禁止默认事件（默认是换行）
        this.getAssignProfessor()
        // var search_val = event.target.value;
        // if(search_val == ''||search_val==null){
        // 	alert('搜索内容不能为空');
        // }else{
        // 	this.$router.push({path: '/doctorlist?keywords=' + search_val});
        // }
      }
    },

    onSubmit(accname) {
    },
    clears() {
      this.value = "";
    },
    serch() {
      this.$visit("SearchChoiseExpert")
      this.show9 = true;
    },
    chooseExpert(name,professorId) {
      this.$store.commit("changeexpertId", professorId);
      this.$store.commit("changeexpertName", name);
      this.$router.back();
    },
    pageInfo() {
      let obj = {
        pageNo: this.currentPage,
        pageSize: 10
      };
      this.$loading('open')
      pageInfo(obj)
        .then(res => {
          if (res.code == "0") {
            this.totlaPages = res.data.professorPage.pages;
            this.commodityList = res.data.professorPage.list;
            if (this.commodityList.length == 0) {
              this.noData = true
            } else {
              this.noData = false
            }
          }
        })
        .catch(err => {
        }).finally(() => {
          this.$hideLoading()
        })
    },

    handleReachButton(done) {
      if (this.currentPage < this.totlaPages) {
        this.currentPage = this.currentPage + 1;
        pageInfo({
          pageNo: this.currentPage,
          pageSize: 10
        }).then(res => {
          if (res.code == "0") {
            let newArr = res.data.professorPage.list;
            this.commodityList = this.commodityList.concat(newArr);
            this.totlaPages = res.data.professorPage.pages;
            done();
          }
        });
      } else {
        done(true);
        return;
      }
    }
  }
};
</script>

<style scoped lang="less">
.searchLine {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #f2f2f2;
  // padding: 0 0.3rem;
  box-sizing: border-box;
  padding-bottom: 0.02rem;
  background: #fff;
  .left {
    height: 1rem;
    padding-bottom: 0.01rem;
    box-sizing: border-box;
    font-size: 0.3rem;
  }
  input {
    outline: none;
    border: none;
    font-size: 0.3rem;
    height: 1rem;
    line-height: 1rem;
    // padding: 0.15rem 0;
    box-sizing: border-box;
    padding-left: 0.2rem;
  }
  .imgIcon {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    display: block;
    margin: 0.35rem auto;
    // margin: 0.15rem auto;
  }
  .icon_search {
    background: url('~/static/sprite/other_sprites.png') 0.42rem -0.6rem;
    background-size: 4.68rem 4.08rem;
  }
  .clears {
    width: 0.6rem;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.3rem;
    overflow: hidden;
    span {
      background: url('~/static/sprite/other_sprites.png') 0.42rem -0.1rem;
      background-size: 4.68rem 4.08rem;
    }
  }
  
}
.back-wrapper /deep/.back-box {
  z-index: 1;
}
.serch-box {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  z-index: 100;
  overflow: hidden;
  padding: 0 0.3rem;
  box-sizing: border-box;
  .search-top{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1000;
    background: #fff;
    overflow: hidden;
  }
  .closeImg {
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    margin-top: 0.3rem;
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.my-center {
  font-weight: 600;
}
.my-right {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.2rem;
  background: url("~@/static/sprite/other_sprites.png") -1.96rem -2.2rem;
  background-size: 4.68rem 4.08rem;
}
.InfoLabelList {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.expert-box {
  width: 100%;
  height: 4rem;
  background: rgba(247, 247, 250, 1);
}
.expert-list-box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  .expert {
    width: 100%;
    height: 1.4rem;
    border: 1px solid #ededed;
    padding: 0.25rem;
    box-sizing: border-box;
    border-radius: 0.1rem;
    margin-bottom: 0.2rem;
    h2 {
      font-size: 0.3rem;
      display: block;
      height: 0.4rem;
    }
    b {
      display: block;
      width: 100%;
      font-size: 0.26rem;
      color: #949494;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.noDataImage {
  text-align: center;
  padding-top: 2.4rem;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
</style>
